<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例讲解--实现两张图片的切换</title>
    <script src="jquery.js"></script>
    <style>
        body,ul, p, h2{
            margin:0; padding:0;
        }
        ul{
            list-style:none;
        }
        .wrapper{
            width:230px;
            margin:50px auto;
        }
        .wrapper h2{
            background:#ddd;
            line-height:40px;
            font-size:20px;
            padding-left:10px;
            color:#666
        }
        .wrapper main{
            border:solid 2px #ddd;
            padding:7px;
        }
        .wrapper ul li{
            width:100%;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            margin-bottom: 15px;
        }
        .left{
            width:800px;
            overflow: hidden;
            position: relative;
        }
        .left img{
            display:block;
            width:212px;
            float:left;
        }
        .top{
            position: absolute;
            bottom:-25px;
            width:100%;
            color:#fff;
            font-size:14px;
            line-height: 25px;;
        }
        .top p{
            position: relative;
            background:#d96160;
            padding-left:10px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <h2> 专题推荐 </h2>
    <main>
        <ul class="list">
            <li>
                <div class="left">
                    <img src="images/1_1.jpg" alt=""/>
                    <img src="images/1_2.jpg" alt=""/>
                </div>
                <div class="top">
                    <p> 几何为网-极致绚烂 </p>
                    <p> COCOON/可可尼 </p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img src="images/1_1.jpg" alt=""/>
                    <img src="images/1_2.jpg" alt=""/>
                </div>
                <div class="top">
                    <p> 几何为网-极致绚烂 </p>
                    <p> COCOON/可可尼 </p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img src="images/1_1.jpg" alt=""/>
                    <img src="images/1_2.jpg" alt=""/>
                </div>
                <div class="top">
                    <p> 几何为网-极致绚烂 </p>
                    <p> COCOON/可可尼 </p>
                </div>
            </li>
        </ul>
    </main>
</div>
</body>
<script>
    // 左右平移的距离
    var img_width = $('.left').children().width()
    $('.list li').each(function(index){
        $(this).hover(function(){
            $('.left').eq(index).stop().animate({
                left:-img_width
            }, 500)
            $('.top').eq(index).children().first().stop().animate({
                top:25
            }).siblings().animate({
                top:-25
            })
        }, function(){
            $('.left').eq(index).stop().animate({
                left:0
            }, 500)
            $('.top').eq(index).children().stop().animate({
                top:0
            })
        })
    })

</script>
</html>
